<template>
  <div>
    <h1>客户档案</h1>
  </div>
</template>

<script setup lang="ts">
import { useCounterStore } from "@/stores/counter";
/**ts的学习*/

/*声明基本数据*/
let str: string = "1354548";
str = "hello word";

/**声明对象（非基本数据类型的都是对象）*/
let person: {
  name: string;
  age?: number; //?表示当前字段不是必传
  [key: string]: any; //表示可以在添加其它字段
};
person = {
  name: "张三",
};

/**函数*/
const javaTest = (a: number, b: number): string => {
  //接收两个类型为number的参数，返回值为string
  return "string";
};
javaTest(1, 2);

/**数组*/
let arr1: string[] = ["1"]; //字符串类型的数组

let arr2: Array<number> = [1, 2]; //数字类型的数组

/**枚举*/
//1数字枚举（自增）
enum Result {
  Up, //0
  Down, //1
  Left, //2
  Right, //3
}
//2字符串枚举
const enum StringResult {
  Up = "up",
  Down = "down",
  Left = "left",
  Right = "right",
}

function enumFun(num: number): void {
  switch (num) {
    case Result.Up:
      console.log("Result==", Result.Up);
      break;
    case Result.Down:
      console.log("Result==", Result.Down);
      break;
    case Result.Left:
      console.log("Result==", Result.Left);
      break;
    case Result.Right:
      console.log("Result==", Result.Right);
      break;
  }
}
enumFun(Result.Up);

/**type （高级类型）*/
//1、联合类型
type Status = number | string; //创建出一个Status类型，他的值必须是number或者string
type Gender = "男" | "女"; //创建出一个Gender类型，他的值必须是 男 或者 女

function testStatus(data: Status): void {}
testStatus(1);

function testGender(data: Gender): void {}
testGender("男");
//2、并且类型
type Area = {
  width: number;
  height: number;
};

type Address = {
  num: number;
  cell: number;
  room: string;
};

type House = Area & Address; //必须包含有Area和Address

const house: House = {
  width: 100,
  height: 100,
  num: 1,
  cell: 2,
  room: "201房间",
};

/**泛型*/
//不知道具体使用什么类型，使用的时候才根据传入的类型去定义，就可以使用泛型
function logData<T>(data: T) {
  console.log(data);
}

logData<number>(100); //在这里传入类型

//表示返回值的类型可以是T类型也可以是U类型
function logData2<T, U>(data: T, data2: U): T | U {
  console.log(data);
  return Date.now() % 2 ? data : data2;
}

logData2<number, string>(100, "999"); //在这里传入类型

type Info = {
  title: string;
  name: string;
};
function logData3<T>(data: T): T {
  console.log(data);
  return data;
}

logData3<Info>({
  title: "信息",
  name: "张三",
}); //在这里传入类型

//接口也可以使用泛型
interface PersonInterface<T> {
  name: string;
  age?: number;
  weight: T;
}

let p: PersonInterface<number> = {
  name: "张行",
  weight: 100,
};

//类型声明文件：.d.ts的扩展名，主要作为就是在ts文件中引入js文件的时候，使移入的js文件具备ts的功能（如鼠标移入会提示需要哪些参数，不传参数会报错）

// 初始化
var i = 0;

// 第一次迭代
if (i < 3) {
  setTimeout(() => console.log(i), 100);
  i++;
}

// 第二次迭代
if (i < 3) {
  setTimeout(() => console.log(i), 100);
  i++;
}

// 第三次迭代
if (i < 3) {
  setTimeout(() => console.log(i), 100);
  i++;
}

// 父作用域（模拟循环控制）
{
  let i = 0; // 循环计数器

  // 第一次迭代
  {
    // 创建迭代作用域
    let i = 0; // 块级作用域变量（值来自父作用域计数器）

    // 循环体
    setTimeout(() => {
      // 闭包捕获当前迭代作用域的 i
      console.log(i); // 0
    }, 100);
  }
  i++; // 更新父作用域计数器 → 1

  // 第二次迭代
  {
    let i = 1; // 新的块级作用域变量
    setTimeout(() => {
      console.log(i); // 1
    }, 100);
  }
  i++; // 更新计数器 → 2

  // 第三次迭代
  {
    let i = 2; // 新的块级作用域变量
    setTimeout(() => {
      console.log(i); // 2
    }, 100);
  }
  i++; // 更新计数器 → 3（循环结束）
}

/**
 * 
技术关联：`Vue3` `WebSocket` `Echarts` `element-plus` `mapbox-gl` `video.js` `vue-plugin-hiprint`
该项目包含领导驾驶舱 视频监控  电动阀控制 门户管理 预警系统 门卫室分系统
短信服务 站点管理 设备管理 工单
管理 资产管理 泵房监控等等……
     •建立操作权限分级机制
     •远程操控智能阀门（开度调节/紧急切断）  
     •对累计流量、压力 、瞬时流量、液位等实时数据监控，异常的立即触发警报
     •建立多维度分析模型（区域用水量/漏损率/营收趋势），支撑管理层决策
     •远程24小时监控泵房，远程开关门禁 报警主机 排水泵PLC，水泵各种数据实时监测，操作日志查询
     •数据可视化大屏，对该项目所有重要数据进行数据统计
     •物资出入库追踪，库存动态预警（备件存量＜阈值警告）
     •全流程工单驱动（报修→派单→处理→验收→回访）
     •操作日志全链路追踪（人员/具体操作增删改查消息/时间/IP地址）

关键成果
减少人工巡检成本
设备故障率下降 
工单处理效率提升

项目名称：营收管理系统
项目周期：12个月
技术关联：`Vue3` `WebSocket` `Echarts` `element-plus` `vue-plugin-hiprint`  `typescript` 
该项目包含 档案管理 抄表  审核 账单 收费 企业下账  代收下账  报表 对账 数据查询模块 缴费终端机等等…… 
     •建立操作权限分级机制
     •操作日志全链路追踪（人员/具体操作增删改查消息/时间/IP地址）
     •支持百万级数据秒级检索
     •变更留痕（修改客户档案自动生成操作日志）
     •异常数据拦截（如单月用水量±50%触发复核）
     •动态查询构建器（支持业务字段自由组合查询）

关键成果
贵州多个地区使用该缴费系统
每年缴费流水上亿元

项目名称：GIS一张图可视化系统
项目周期：2个月
技术关联：`Vue3` `WebSocket` `Echarts` `element-plus` `天地图`  `mapbox` 
该项目包含  区域划分 地名标注 管网  泵房  流量计 井盖  阀门  消防栓 雨量计 监测点等等…… 
     •动态阈值告警（如压力＞阈值触发闪烁告警）
     •管网流体动态仿真（基于数据绘制管网水流方向粒子动画）
     •支持测量长度、测量面积、打标记
     •实时监控监测点异常变化，建立多维度分析模型，支撑管理层决策
     •支持多窗口同屏比对，方便对比数据变化
     •支持快速查看泵房监控画面、设备操控、快速编辑

     专注政务级系统开发，主导贵州智慧水务平台建设（年资金流水¥3.8亿+），保障连续多月0事故运行
     坚持“技术驱动业务”理念，持续在高压场景中淬炼自己

     Vue全栈攻坚
     精通 `Vue2/Vue3` + `TypeScript` 工程化开发
     深度优化 `Vuex` 状态管理  `Axios` 拦截器封装
     • 空间智能专家（天地图政务开发｜Mapbox GL定制

  
 Vue开发:Vue2 Vue3 + TS｜Vuex｜Axios
 WebGis：天地图开发｜Mapbox  
 跨端开发：Uniapp｜Flutter  
 工程基建：Element-Plus组件库｜UviewPlus  
 全栈能力：Java | SpringBoot｜MySQL｜MyBatisPlus  
 设计协作：Photoshop/Illustrator

**技术实证**  
• Mapbox GL爆管仿真 → 推演效率↑98%  
• WebAssembly计算引擎 → 水质模型提速20倍  
• 自研GIS打印插件 → 替代¥80万商业授权  
*/
</script>

